<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';

const idCard = ref('');
const phone = ref('');
const password = ref('');
const employeeId = ref('');
const step = ref(1); // 1: 输入身份证和手机号，2: 显示编号并输入密码
const router = useRouter();
const backgroundUrl = ref('');

async function handleNext() {
  if (!idCard.value || !phone.value) {
    alert('请输入身份证号和手机号');
    return;
  }
  try {
    // 假设后端接口返回员工编号
    const res = await axios.post('http://localhost:8080/login/getEmp', {
      idCard: idCard.value,
      phone: phone.value
    });
    if (res.data.code === 200) {
      employeeId.value = res.data.data;
      alert(`欢迎您入职银行，您的员工编号为：${employeeId.value}`);
      step.value = 2;
    } else {
      alert(res.data.msg || '获取员工编号失败');
    }
  } catch (error) {
    alert('请求失败');
  }
}

async function handleRegister() {
  if (!password.value) {
    alert('请输入密码');
    return;
  }
  try {
    const res = await axios.post('http://localhost:8080/login/updataEmp', {
      employeeId: employeeId.value,
      password: password.value
    });
    if (res.data.code === 200) {
      alert('注册成功，请登录');
      router.push('/login');
    } else {
      alert(res.data.msg || '注册失败');
    }
  } catch (error) {
    alert('注册请求失败');
  }
}

async function fetchBackground() {
  try {
    // 1. 发送请求，等待返回
    const res = await axios.get('http://localhost:8080/login/background');
    // 2. 打印返回值，便于调试
    console.log('背景图片返回值:', res);
    // 3. 判断返回值结构，提取图片地址
    if (res.data.code === 200) {
      backgroundUrl.value = res.data.data;
    } else {
      backgroundUrl.value = '';
    }
    console.log('最终背景图片地址:', backgroundUrl.value);
  } catch (error) {
    // 4. 捕获异常，处理错误
    console.error('获取背景图片失败:', error);
    backgroundUrl.value = '';
  }
}

function goLogin() {
  router.push('/login');
}

onMounted(() => {
  fetchBackground();
});
</script>
<template>
  <div
    class="login-container"
    :style="backgroundUrl ? { backgroundImage: `url('${backgroundUrl}')`, backgroundSize: 'cover', backgroundPosition: 'center' } : {}"
  >
    <div class="login-box">
      <form v-if="step === 1" @submit.prevent="handleNext">
        <div class="form-group">
          <label for="idCard">身份证号</label>
          <input id="idCard" v-model="idCard" type="text" placeholder="请输入身份证号" required />
        </div>
        <div class="form-group">
          <label for="phone">手机号</label>
          <input id="phone" v-model="phone" type="text" placeholder="请输入手机号" required />
        </div>
        <button type="submit">下一步</button>
        <button type="button" @click="goLogin" class="register-btn">返回登录</button>
      </form>
      <form v-else @submit.prevent="handleRegister">
        <div class="form-group">
          <label>您的员工编号为：</label>
          <div style="font-size: 20px; color: #409eff; font-weight: bold; margin-bottom: 16px;">{{ employeeId }}</div>
        </div>
        <div class="form-group">
          <label for="password">设置密码</label>
          <input id="password" v-model="password" type="password" placeholder="请输入密码" required />
        </div>
        <button type="submit">注册</button>
        <button type="button" @click="goLogin" class="register-btn">返回登录</button>
      </form>
    </div>
  </div>
</template>

<style scoped>
.login-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(120deg, #409eff 0%, #6dd5ed 100%);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.login-box {
  position: absolute;
  right: 10vw;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  padding: 40px 30px 30px 30px;
  border-radius: 10px;
  min-width: 320px;
  color: #fff;
}
.form-group {
  margin-bottom: 32px;
}
label {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
  color: #fff;
}
input {
  width: 100%;
  padding: 8px 10px 8px 0;
  border: none;
  border-bottom: 2px solid #fff;
  border-radius: 0;
  font-size: 18px;
  background: transparent;
  color: #fff;
  outline: none;
  transition: border-color 0.2s;
}
input:focus {
  border-bottom: 2.5px solid #409eff;
}
button {
  width: 100%;
  padding: 0;
  background: none;
  color: #fff;
  border: none;
  border-radius: 0;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 10px;
  box-shadow: none;
  transition: color 0.2s;
  text-align: center;
}
button:hover {
  color: #409eff;
  background: none;
}
.login-box input::placeholder {
  color: #eee;
}
.register-btn {
  margin-top: 16px;
  font-size: 18px;
  color: #409eff;
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: center;
}
.register-btn:hover {
  text-decoration: underline;
}
</style>
